<template>
    <div class="wc-poprank" v-if="dList.length > 0">
        <div class="pr-title">球队人气榜</div>
        <div class="pr-list">
            <div class="left">
                <div class="pr-item" v-for="(country,index) in dList" v-if="index < 3" :key="index">
                    <span class="label">{{country.name}}</span>
                    <span class="progress" :style="{'width': country.proportion}"></span>
                    <span class="total">{{country.supportNum}}票</span>
                </div>
            </div>
            <div class="line"></div>
            <div class="right">
                <div class="pr-item" v-for="(country,index) in dList" v-if="index > 2 && index < 6" :key="index">
                    <span class="label">{{country.name}}</span>
                    <span class="progress" :style="{'width': country.proportion}"></span>
                    <span class="total">{{country.supportNum}}票</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    data () {
        return {
            dList: []
        }
    },
    created () {
        this.fetch();
    },
    methods: {
        fetch () {
            axios.get('/api/java/country/list').then((res) => {
                this.sort(res.data.data);
            })
        },
        sort (list) {
            var sList = list.sort((item1, item2) => {
                return item2.supportNum - item1.supportNum;
            });
            this.dList = sList.filter((item) => {
                if (item.supportNum > 0) {
                    item.proportion = (item.supportNum / sList[0].supportNum * 50) + '%';
                    return true;
                }
                return false;
            })
        }
    }
}
</script>
<style lang="less" scoped>
    @import '~assets/less/variable.less';
    .pr-title {
        text-align: center;
        font-size: 15px;
    }
    .left,.right {
        width: 49%;
        padding: 0 15px;
    }
    .left {
        float: left;
        box-sizing: border-box;
    }
    .right {
        float: right;
        box-sizing: border-box;
        padding-right: 10px;
    }
    .pr-list {
        overflow: hidden;
        position: relative;
        margin-top: 20px;
        font-size: 13px;
    }
    .pr-item {
        overflow: hidden;
    }
    .line {
        position: absolute;
        margin: 0 auto;
        left: 0;
        right: 0;
        width: 1px;
        height: 72px;
        background-color: @color-line-grey;
    }
    .label,
    .total {
        display: inline-block;
        line-height: 24px;
        height: 20px;
    }
    .label {
        float: left;
        width: 30%;
    }
    .total {
        float: right;
        text-align: right;
    }
    .progress {
        display: inline-block;
        height: 13px;
        width: 45%;
        margin-top: 5px;
        background-color: #f44336;
    }
</style>

